<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- vue 文件 -->
  <script src="js/vue.js"></script>
  <script src="./js/axios.js"></script>
  <!-- 引入http-vue-loader -->
  <script src="./js/httpVueLoader.js"></script>
  <!-- element-ui 文件 -->
  <link rel="stylesheet" href="./css/element.css">
  <script src="./js/element.js"></script>
  <!-- css文件 -->
  <link rel="stylesheet" href="css/index.css">
</head>

<body>
  <div id="app">
    <base-layout>
      <div>
        <!-- 轮播图 -->
        <div class="carousel">
          <div class="carousel-item">
            <el-carousel type="card">
              <el-carousel-item v-for="(item,index) in bannerList" :key="index">
                <img :src="item.img" />
              </el-carousel-item>
            </el-carousel>
          </div>
        </div>
        <div v-if="videoList.length">
          <video-list title="推荐" :list="recommendList"></video-list>
          <video-list title="热门" :list="hotList"></video-list>
        </div>
      </div>
    </base-layout>
  </div>

  <script>
    Vue.use(httpVueLoader)
    //创建 vm 实例对象
    const vm = new Vue({
      el: '#app',
      data: {
        videoList: [],
        recommendList: [],
        hotList: [],
        bannerList: []
      },
      components: {
        'base-layout': httpVueLoader('./components/BaseLayout.vue'),
        'video-list': httpVueLoader('./components/VideoList.vue'),
      },
      async created(){
        await axios.get('http://localhost:8080/videoServlet').then(res => {
          let data = res.data
          data.forEach(item => {
            //判断img是否是完整的路径
            item.img.indexOf("http") === -1 && (
              item.img = "http://localhost:8080/img/" + item.img
            )
            if(item.tag){
              item.tag === "recommend" && this.recommendList.push(item)
              item.tag === "hot" && this.hotList.push(item)
            }
          })
          this.videoList = data
        });

        await axios.get("http://localhost:8080/BannerServlet.do").then(res => {
          let data = res.data
          this.bannerList = data.map(item => {
            //判断img是否是完整的路径
            item.image_url.indexOf("http") === -1 ? (
              item.img = "http://localhost:8080/img/" + item.image_url
            ) : item.img = item.image_url
            return item
          })
          console.log(this.bannerList)
        });
      }
    });
  </script>
</body>

</html>